<template>
    <view class="buy-member">
      <page-loading :show="showPage">
        <view class="section" v-if="res.recharge.length > 0">
          <view class="top">
            <view class="title"><text>充值会员，无限畅洗</text></view>
            <view class="tips"><text>灵活洗车，冲水、泡沫、吸尘计时，全国通用，无期限限制。</text></view>
          </view>
          <view class="list">
            <view class="item" style="position: relative;" v-for="(item, index) in res.recharge" :key="index" @click="onClickItem(item)">
              <image style="position: absolute;" class="img" :src="item.pic_URL" v-if="item.pic_URL"></image>
							<view class="flex flex-dir-c flex-ai-c flex-jc-c img-text">
								<view class="sale-price"><text style="font-size: 44rpx;">{{item.card_Cost}}</text><text>元</text></view>
								<view class="free-cost" v-if="item.free_Cost">(送{{item.free_Cost}}元)</view>
							</view>
            </view>
          </view>
        </view>
        
        <view class="section" v-if="res.month.length > 0">
          <view class="top">
            <view class="title"><text>包月服务会员，天天免费洗</text></view>
            <view class="tips"><text>适合经常洗车用户，冲水、泡沫或吸尘时计时，每天上限30分钟。</text></view>
          </view>
          <view class="list">
            <view class="item" style="position: relative;" v-for="(item, index) in res.month" :key="index" @click="onClickItem(item)">
              <image style="position: absolute;" class="img" :src="item.pic_URL" v-if="item.pic_URL"></image>
              <view class="flex flex-dir-c flex-ai-fs flex-jc-c img-text" style="padding-left: 10rpx;">
              	<view class="name" style="color: #2F2F2F;font-size: 26rpx;">{{item.coupon_Name | cutString(14)}}</view>
              	<view style="color: #fff;width: 100%;font-size: 20rpx;">￥<text style="font-size: 24rpx;font-weight: bold;margin-right: 10rpx;">{{item.sale_Price}}</text>￥<text style="text-decoration: line-through;">{{item.normal_Price}}</text></view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="section" v-if="res.second.length > 0">
          <view class="top">
            <view class="title"><text>次卡会员，洗一次扣一次</text></view>
            <view class="tips"><text>适合不定期洗车用户，冲水、泡沫或吸尘时计时，每次可洗20分钟。</text></view>
          </view>
          <view class="list">
            <view  v-for="(item, index) in res.second" :key="index" @click="onClickItem(item)">
              <view class="item" style="position: relative;" v-if="item.id!=='37'">
								<image style="position: absolute;" class="img" :src="item.pic_URL" v-if="item.pic_URL"></image>
								<view class="flex flex-dir-c flex-ai-fs flex-jc-c img-text" style="padding-left: 10rpx;">
									<view class="name" style="color: #2F2F2F;font-size: 26rpx;">{{item.coupon_Name | cutString(14)}}</view>
									<view style="color: #fff;width: 100%;font-size: 20rpx;">￥<text style="font-size: 24rpx;font-weight: bold;margin-right: 10rpx;">{{item.sale_Price}}</text>￥<text style="text-decoration: line-through;">{{item.normal_Price}}</text></view>
								</view>
							</view>
            </view>
          </view>
        </view>
        
        <view class="section" v-if="res.minute.length > 0">
          <view class="top">
            <view class="title"><text>计时会员，按时间消耗</text></view>
            <view class="tips"><text>自由洗车，冲水、泡沫或吸尘时计时。</text></view>
          </view>
          <view class="list">
            <view class="item" style="position: relative;" v-for="(item, index) in res.minute" :key="index" @click="onClickItem(item)">
              <image style="position: absolute;" class="img" :src="item.pic_URL" v-if="item.pic_URL"></image>
              <view class="flex flex-dir-c flex-ai-fs flex-jc-c img-text" style="padding-left: 10rpx;">
              	<view class="name" style="color: #2F2F2F;font-size: 26rpx;">{{item.coupon_Name | cutString(14)}}</view>
              	<view style="color: #fff;width: 100%;font-size: 20rpx;">￥<text style="font-size: 24rpx;font-weight: bold;margin-right: 10rpx;">{{item.sale_Price}}</text>￥<text style="text-decoration: line-through;">{{item.normal_Price}}</text></view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="section">
          <view class="top">
            <view class="title"><text>会员特权</text></view>
          </view>
          <view class="list-privilege">
            <view class="item">
              <view class="icon-box">
                <image class="img" src="https://files.yzsheng.com/client/selfwash/privilege_1.png"></image>
              </view>
              <view class="right">
                <view class="title"><text>全国洗车点通用</text></view>
                <view class="desc"><text>大平台有保障，一次购买，全国通用。</text></view>
              </view>
            </view>
            <view class="item">
              <view class="icon-box">
                <image class="img" src="https://files.yzsheng.com/client/selfwash/privilege_2.png"></image>
              </view>
              <view class="right">
                <view class="title"><text>机器故障保险</text></view>
                <view class="desc"><text>如果遇到机器故障无法洗车，则无条件补偿当次消耗。</text></view>
              </view>
            </view>
            <view class="item">
              <view class="icon-box">
                <image class="img" src="https://files.yzsheng.com/client/selfwash/privilege_3.png"></image>
              </view>
              <view class="right">
                <view class="title"><text>保养/美容/维修尽享折扣</text></view>
                <view class="desc"><text>官方不定期将有好礼券相送享受保养/美容/维修等减免。</text></view>
              </view>
            </view>
          </view>
        </view>
        
      </page-loading>
      <u-popup mode="bottom" v-model="show" border-radius="30" :zoom="false" :safe-area-inset-bottom="true" :mask-close-able="false" :closeable="false">
        <view class="confrim-box" v-if="current">
          <view class="content">
            <view class="top">
              <view class="icon-close" @click="onClosePopup">
                <u-icon name="close-circle-fill" color="#e5e5e5" size="50"></u-icon>
              </view>
            </view>
            <view class="list">
              <view class="cell">
                <view class="img-box" style="position: relative;" v-if="current.card_Type===4">
									<image style="position: absolute;" class="img" :src="current.pic_URL" v-if="current.pic_URL"></image>
									<view class="flex flex-dir-c flex-ai-c flex-jc-c img-text">
										<view class="sale-price"><text style="font-size: 44rpx;">{{current.card_Cost}}</text><text>元</text></view>
										<view class="free-cost" v-if="current.free_Cost">(送{{current.free_Cost}}元)</view>
									</view>
                </view>
								<view class="img-box" style="position: relative;"v-else>
									<image style="position: absolute;" class="img" :src="current.pic_URL" v-if="current.pic_URL"></image>
									<view class="flex flex-dir-c flex-ai-fs flex-jc-c img-text-2" style="">
										<view class="name" style="color: #2F2F2F;font-size: 24rpx;">{{current.coupon_Name | cutString(12)}}</view>
										<view style="color: #fff;width: 100%;font-size: 18rpx;">￥<text style="font-size: 24rpx;font-weight: bold;margin-right: 10rpx;">{{current.sale_Price}}</text>￥<text style="text-decoration: line-through;">{{current.normal_Price}}</text></view>
									</view>
								</view>
                <view class="right">
                  <view class="t">
                    <text class="title">{{current.coupon_Name}}</text>
                    <text class="num">x1</text>
                  </view>
                  <view class="amount"><text>￥<text class="bold">{{parseFloat(current.sale_Price).toFixed(2)}}</text></text></view>
                </view>
              </view>
              <!-- 优惠券 -->
              <view class="other-cell coupon" @click="onClickCoupon(couponNum)">
                <text class="title">优惠券</text>
                <view class="right">
                  <block v-if="couponInfo">
                    <text class="coupon-title">{{couponInfo.coupon_Package_Name}}</text>
                    <text class="red">-￥{{couponInfo.couponAllMoney}}</text>
                  </block>
                  <block v-else>
                    <view class="coupon-box" v-if="couponNum > 0"><text>{{couponNum}}张可用</text></view>
                    <text v-else class="color-999 mr-20">暂无优惠券</text>
                  </block>
                  <view v-if="!couponInfo">
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                  </view>
                  <view v-else @click.stop="onClearCoupon()">
                    <u-icon name="close" size="24" color="#999"></u-icon>
                  </view>
                </view>
              </view>
              
              <!-- 金额 -->
              <view class="price-box">
                <text class="discount-amount">已优惠<text class="red">￥{{couponInfo ? parseFloat(couponInfo.couponAllMoney).toFixed(2) : '0.00'}}</text></text>
                <text class="total-amount">小计<text class="unit">￥</text><text class="bold">{{amount}}</text></text>
              </view>
              
            </view>
            
            <!-- 协议 -->
            <view class="agreement">
              <view class="radio" :class="{active: isAgreement}" @click="isAgreement = !isAgreement">
                <u-icon name="checkmark" color="#fff" size="26"></u-icon>
              </view>
              <view class="text"><text>点击“去支付”按钮并购买养车礼包时，即代表您已阅读、理解并 接受<text class="highlight">电子会员养车礼包说明及规定。</text></text></view>
            </view>
          </view>
          <view class="footer">
            <view class="left">
              <view class="amount">
                <text>￥<text class="bold">{{amount}}</text></text>
              </view>
              <view class="discount">
                <text>已优惠:￥{{couponInfo ? parseFloat(couponInfo.couponAllMoney).toFixed(2) : '0.00'}}</text>
              </view>
            </view>
            <view class="right" @click="onSubmit"><text>去支付</text></view>
          </view>
        </view>
      </u-popup>
    </view>
</template>

<script>
const dayjs = require('@/utils/dayjs.js')
export default {
	filters: {
	  cutString(str, len) {
	    if (str.length * 2 <= len) {
	      return str
	    }
	    let strlen = 0
	    let s = ''
	    for (let i = 0; i < str.length; i++) {
	      s = s + str.charAt(i)
	      if (str.charCodeAt(i) > 128) {
	        strlen = strlen + 2
	        if (strlen >= len) {
	          return s.substring(0, s.length - 1) + '...'
	        }
	      } else {
	        strlen = strlen + 1
	        if (strlen >= len) {
	          return s.substring(0, s.length - 2) + '...'
	        }
	      }
	    }
	    return s
	  },
	},
  data() {
    return {
      showPage: false,
      show: false,
      couponNum: 0, // 优惠券数量
      couponInfo: null, // 已选优惠券信息
      isAgreement: false, // 是否勾选协议
      res: {
        month: [], // 月
        second: [], // 次
        minute: [], // 分钟
        recharge: [], // 计费 
      },
      current: null,
      machineId: '', // 机器id
      couponInfo: null, // 优惠券
			jump:'',//跳转方法(back为返回上一页)
    }
  },
  computed: {
    purchaseChannel() {
      return this.$store.state.purchaseChannel
    },
    amount() {
      let price = 0
      if(this.current) {
        if(this.couponInfo) {
          price = Number(this.current.sale_Price) - this.couponInfo.couponAllMoney
        } else {
          price = Number(this.current.sale_Price)
        }
      } else {
        price = 0
      }
      return parseFloat(price).toFixed(2)
    }
  },
  onLoad(options) {
		console.log(options)
		this.jump = options.jump
    this.machineId = options.machineId || ''
    this.getList()
    this.getBuyCardList()
    
    uni.$on('changeWashCoupon', data => {
      this.couponInfo = data
    })
		// console.log(this.$store.state.machineId)
  },
  methods: {
    async getList() {
      try{
        let res = await this.$api.selfServiceCarWash.GetBuyDiscountsList({
          pageIndex: 1,
          pageSize: 50
        })
        let result = {
          month: [], // 包月
          second: [], // 次卡
          minute: [], // 计时
          recharge: [] // 计费
        }
        if(res.code === 200) {
          res.data.list.map(item => {
            if(item.card_Type === 1) {
              result.month.push(item)
            } else if(item.card_Type === 2) {
              result.second.push(item)
            } else if(item.card_Type === 3) {
              result.minute.push(item)
            } else if(item.card_Type === 4) {
              result.recharge.push(item)
            }
          })
          this.res = result
          this.showPage = true
        }
      }catch(e){
        //TODO handle the exception
      }
    },
    onClickItem(item) {
			console.log(item)
			if(item.card_Type===1||item.card_Type===2){
				const start = Date.parse(new Date())
				const end = Date.parse(item.deadline)
				if(start>end){
				  uni.showToast({
				    title: '该会员卡已过期',
				    icon: 'none'
				  })
					 return false
				}
			}
			
      this.current = item
      this.couponInfo = null
      this.show = true
    },
    // 关闭弹窗
    onClosePopup() {
      this.show = false
      this.current = null
      this.couponInfo = null
    },
    // 获取可用优惠券数量
    async getBuyCardList() {
      try{
        let res = await this.$api.user.GetMyUsableSelfServiceCarWashCouponDetails({
          pageIndex: 1,
          pageSize: 1
        })
        if(res.code === 200) {
          this.couponNum = res.data.total
        }
      }catch(e){
        //TODO handle the exception
      }
    },
    // 点击选择优惠券
    onClickCoupon(num, type) {
      let userinfo = uni.getStorageSync('Ztc_C_USER_INFO') || null
      if(num <= 0 || !userinfo) return false
      uni.navigateTo({
        url: `/pages_userModule/myCoupon/chooseWash?amount=${this.current.sale_Price}`
      })
    },
    // 点击去支付
    async onSubmit() {
      if(!this.isAgreement) {
        uni.showToast({
          icon: 'none',
          title: '请同意说明及规定后支付'
        })
        return false
      }
      uni.showLoading({
        title: '加载中'
      })
      try{
        let params = {
          self_Service_Car_Wash_Card_Id: this.current.id,
          purchase_Channel: this.purchaseChannel ? 2 : 1 // 购买途径 1：线上 2：线下
        }
        if(this.couponInfo) {
          params.couponId = this.couponInfo.id
          params.coupon_Details_Id = this.couponInfo.coupon_Details_Id
        }
        if(this.machineId) {
          params.wash_Machine_Id = this.machineId
        }
				
        let res = await this.$api.selfServiceCarWash.AddSelfServiceCarWashDiscountOrder(params)
        uni.hideLoading()
        if(res.code === 200) {
          /* uni.redirectTo({
            url: `/pages_commodity/payment/payment?orderNo=${res.data}&type=selfServiceCarWashCoupon&price=${this.amount}&machineId=${this.machineId}`
          }) */
					uni.redirectTo({
					  url: `/pages_commodity/newPay/newPay?orderNo=${res.data}&type=selfServiceCarWashCoupon&price=${this.amount}&machineId=${this.machineId}&jump=${this.jump}`
					})
        } else {
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
        }
      } catch(e) {
        uni.showToast({
          icon: 'none',
          title: e.msg
        })
      }
    },
    // 清除优惠券
    onClearCoupon() {
      this.couponInfo = null
    }
  }
}
</script>

<style lang="scss">
	.img-text{
		position: absolute;
		z-index: 1;
		line-height: 40rpx;
		width: 100%;
		height: 100%;
		top: 15rpx;
	}
	.img-text-2{
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		padding-left: 10rpx;
		top: 0rpx;
		line-height: 35rpx;
		margin-top: 5rpx;
	}
	.sale-price{
		font-weight: bold;
		color: #685712;
	}
	.name{
		font-size: 26px;
		font-weight: bold;
		color: #2F2F2F;
		text-shadow: 3rpx 2rpx 4rpx rgba(47, 47, 47, 0.5);
	}
	.free-cost{
		color: rgb(255,106,105);
		font-weight: lighter;
		font-size: 24rpx;
	}
page{
  background-color: #f1f1f1;
}
.buy-member{
  .section{
    background-color: #fff;
    margin-bottom: 16rpx;
    padding: 30rpx;
    .top{
      .title{
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
      .tips{
        font-size: 20rpx;
        color: #999;
        margin-top: 10rpx;
      }
    }
    .list{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: -30rpx;
      .item{
        width: 212rpx;
        height: 140rpx;
        border-radius: 10rpx;
        background-color: #FEDD58;
        margin: 30rpx 0 0 28rpx;
        overflow: hidden;
        .img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .list-privilege{
      margin-top: 10rpx;
      .item{
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        .icon-box{
          width: 60rpx;
          height: 60rpx;
          .img{
            width: 60rpx;
            height: 60rpx;
          }
        }
        .right{
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 16rpx;
          flex: 1;
          .title{
            font-size: 24rpx;
            color: #333;
          }
          .desc{
            font-size: 20rpx;
            color: #999;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
  .confrim-box{
    .content{
      background-color: #fff;
      padding: 20rpx 30rpx 30rpx;
      .top{
        display: flex;
        justify-content: flex-end;
      }
      .list{
        .cell{
          display: flex;
          padding: 30rpx 0;
          border-bottom: 1px solid #eee;
          .img-box{
            width: 172rpx;
            height: 114rpx;
            background-color: #B8B8B8;
            border-radius: 10rpx;
            overflow: hidden;
            .img{
              width: 100%;
              height: 100%;
            }
          }
          .right{
            flex: 1;
            margin-left: 25rpx;
            height: 114rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .t{
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 28rpx;
              color: #333;
            }
            .amount{
              text-align: right;
              font-size: 24rpx;
              color: #FF4B44;
              .bold{
                font-size: 36rpx;
                font-weight: bold;
              }
            }
          }
        }
        .other-cell{
          height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #eee;
          .title{
            font-size: 26rpx;
            color: #333;
            font-weight: bold;
          }
          .right{
            display: flex;
            align-items: center;
            .price{
              font-size: 20rpx;
              color: #333;
              .strong{
                font-size: 30rpx;
                font-weight: bold;
              }
            }
            .num{
              font-size: 26rpx;
              color: #666;
              margin-left: 14rpx;
            }
            .coupon-title{
              font-size: 26rpx;
              color: #333;
            }
            .red{
              font-size: 26rpx;
              color: #FF5751;
              margin: 0 25rpx 0 10rpx;
            }
            .coupon-box{
              // background-color: #FF4B44;
              height: 42rpx;
              display: flex;
              align-items: center;
              padding: 0 20rpx;
              margin-right: 20rpx;
              font-size: 18rpx;
              color: #fff;
              background-image: 
                radial-gradient(
                  circle at 100% 3px, 
                  transparent 4rpx, 
                  #FF4B44 4rpx, 
                  #FF4B44 0rpx);
              background-size: 100% 6px;
              background-repeat-x: no-repeat;
              position: relative;
              &::after{
                content: '';
                display: block;
                width: 8px;
                height: 8px;
                border-radius: 8px;
                background-color: #fff;
                position: absolute;
                left: 0;
                top: 50%;
                margin: -4px 0 0 -4px;
              }
              &::before{
                content: '';
                display: block;
                width: 1px;
                height: 42px;
                background-color: #fff;
                position: absolute;
                right: 0;
                top: 0;
              }
            }
          }
        }
        
        .coupon{
          height: auto;
          min-height: 106rpx;
          align-items: flex-start;
          padding: 30rpx 0;
          .right{
            align-items: flex-start;
            justify-content: flex-end;
            flex: 1;
            margin-left: 20rpx;
            .rows{
              flex: 1;
              display: inline-block;
              overflow: hidden;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              text-align: right;
            }
            .u-icon{
              margin-top: 8rpx;
            }
            .coupon-list{
              display: flex;
              flex-direction: column;
              .coupon-item{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height: 40rpx;
              }
            }
          }
        }
        .price-box{
          height: 100rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .discount-amount{
            font-size: 26rpx;
            color: #333;
            .red{
              color: #FF5751;
            }
          }
          .total-amount{
            font-size: 26rpx;
            color: #333;
            margin-left: 50rpx;
            .unit{
              font-size: 24rpx;
              margin-left: 10rpx;
            }
            .bold{
              font-size: 32rpx;
              font-weight: bold;
            }
          }
        }
      }
      .agreement{
        display: flex;
        align-items: center;
        .radio{
          width: 36rpx;
          height: 36rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 36rpx;
          border: 2rpx solid #bfbfbf;
          &.active{
            background-color: #FBD220;
            border: none;
          }
        }
        .text{
          flex: 1;
          font-size: 22rpx;
          color: #666;
          margin-left: 24rpx;
          .highlight{
            color: #FBB000;
          }
        }
      }
    }
    .footer{
      height: 110rpx;
      background-color: #3D3D3D;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 40rpx;
        .amount{
          font-size: 24rpx;
          color: #fff;
          .bold{
            font-size: 36rpx;
            font-weight: bold;
          }
        }
        .discount{
          font-size: 24rpx;
          color: #999;
        }
      }
      .right{
        height: 110rpx;
        width: 200rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        font-size: 32rpx;
        color: #3D3D3D;
      }
    }
  }
}
</style>
